<%--
  Created by IntelliJ IDEA.
  User: 24044
  Date: 2021/9/14
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入外部标签库--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    //获取当前项目路径(/项目工程名)
    pageContext.setAttribute("path",request.getContextPath());
    //获取当前项目完整路径(http://localhost:8080/项目工程名)
    String app_path=request.getScheme()
            +"://"
            +request.getServerName()
            +":"
            +request.getServerPort()
            +request.getContextPath();
%>
<html>
<head>
    <title>员工列表</title>
    <%--
        （1）不以"/"开头：找资源，经常容易出问;
                        <情况一：> 若只在开发前端静态页面的项目中，默认以当前资源的路径为基准，路径前面可以加"./"，也可以不加（结果不影响）；
                        <情况二：> 若是在动态web项目中，无论jsp，html页面在webapp下面的哪个子目录里面，默认路径都以webapp文件夹下面为基准
                        注意： "./" : 表示当前目录
                              "../" : 表示当前目录的上一级目录，可以多层嵌套使用
        （2）以"/"开头：找资源;
                        <1> 在动态web项目中：以服务器的路径为标准(http://localhost:8080)，使用时需要后面加上 "/项目工程名+/资源路径"；
                                注意："/+项目工程名" : 会自动映射到动态web项目的"webapp"目录下面，而不是项目当前目录下面
                        <2> 在静态页面开发项目中，不能直接使用 "/"。
        （3）设置一个全局变量path(域对象也OK),给path赋值为当前项目路径或者完整路径
    --%>
    <%--    引入jQuery--%>
    <script type="text/javascript" src="${path}/static/js/jquery-1.9.1.js"></script>
    <%--    引入bootstrap框架样式--%>
    <link rel="stylesheet" href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

<%-- 创建修改员工信息的模态框--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" name="empName" id="empName_update_static" placeholder="empName"></p>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="email" id="email_update_input" placeholder="email@163.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="dId" id="dept_update_select">
                                <%--                                <option>开发部</option>--%>
                                <%--                                <option>测试部</option>--%>
                                <%--                                <option>生产部</option>--%>
                                <%--                                <option>运营部</option>--%>
                                <%--                                <option>销售部</option>--%>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">保存修改</button>
            </div>
        </div>
    </div>
</div>

<%--创建增加员工的模态框 --%>
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="empName" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="email" id="email_add_input" placeholder="email@163.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="dId" id="dept_add_select">
<%--                                <option>开发部</option>--%>
<%--                                <option>测试部</option>--%>
<%--                                <option>生产部</option>--%>
<%--                                <option>运营部</option>--%>
<%--                                <option>销售部</option>--%>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存员工</button>
            </div>
        </div>
    </div>
</div>

    <%--搭建显示页面--%>
    <div class="container">
        <%--标题--%>
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <%--按钮--%>
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="emp_add_modal_btn">添加员工</button>
                <button class="btn btn-danger" id="emp_delete_all_btn">批量删除</button>
            </div>
        </div>
        <%--显示表格数据--%>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emp_table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="checkbox_all"/>
                            </th>
                            <th>id</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--显示导航栏，分页信息--%>
        <div class="row">
            <%--分页文字信息--%>
            <div class="col-md-6" id="page_info">
            </div>
            <%--导航页面信息--%>
            <div class="col-md-6" id="page_nav">
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //定义一个全局变量：作为CRUD数据后分页的最后一页
        var totalRecord = null;
        var currentPage = null;

        // 页面加载完成之后，发起一个Ajax请求，获取到后台完整分页json数据，这个方法会自动执行
        $(function () {
            //直接跳转去首页
            to_page(1);
        });

        //5.跳转页面方法（显示某页数据）：需要调用才会生效
        function to_page(pn) {
            $.ajax({
                url:"${path}/emps",
                data:"pn="+pn,
                type:"get",
                success:function (data) {
                    //1.解析并显示员工数据
                    // console.log(data);
                    //2.解析并显示员工信息
                    build_emps_table(data);
                    //3.解析并显示分页信息
                    bulid_page_info(data);
                    //4.解析并显示导航信息
                    build_page_nav(data);
                }
            });
        }

        //定义一个解析并显示员工信息的函数方法，需要调用才会生效
        function build_emps_table(data){
            //清空之前的数据
            $("#emp_table tbody").empty();
            //从后台获取json数据：data
            var emps = data.map.pageInfo.list;
            //解析数据，并循环输出
            $.each(emps,function (items,item) {
                // alert(item.empName);
                //定义需要创建的标签变量
                var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empId = $("<td></td>").append(item.empId);
                var empName = $("<td></td>").append(item.empName);
                var gender = $("<td></td>").append(item.gender == "M" ? "男" : "女");
                //给性别添加一个class值，方便后面查找gender单选框
                var email = $("<td></td>").append(item.email);
                var department = $("<td></td>").append(item.department.deptName);
                /**
                 *  添加操作标签
                 *  <button class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Star
                        编辑
                    </button>
                 */
                var editbtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                        .append("编辑");
                //给编辑按钮增加一个属性值与id一致，方便给编辑按钮回显查询员工信息使用
                editbtn.attr("edit_id",item.empId);
                var delbtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                        .append("删除");
                //给删除按钮增加一个属性值与id一致，方便给删除按钮查询员工信息使用
                delbtn.attr("del_id",item.empId);
                //把编辑按钮与删除按钮合并在一起
                var btnall = $("<td></td>").append(editbtn).append("   ").append(delbtn);

                //将标签变量，添加到动态创建的标签的中去
                $("<tr></tr>").append(checkboxTd)
                    .append(empId)
                    .append(empName)
                    .append(gender)
                    .append(email)
                    .append(department)
                    .append(btnall)
                    .appendTo("#emp_table tbody");
            })
        }

        //定义一个解析并显示分页信息的的函数方法，需要调用才会生效
        function bulid_page_info(data) {
            //清空之前的数据
            $("#page_info").empty();
            //从后台解析获取json数据
            var pageNum = data.map.pageInfo.pageNum;
            var pages = data.map.pageInfo.pages;
            var total = data.map.pageInfo.total;

            //给全局变量赋值
            totalRecord = data.map.pageInfo.total;
            currentPage = data.map.pageInfo.pageNum;

            //将数据添加到标签对象中去
            //方式一：
            // $("#page_info").append("当前第"+pageNum+"页，总共"+pages+"页，总共"+total+"记录");
            //方式二：
            $("<h4>"+"当前第"+pageNum+"页，总共"+pages+"页，总共"+total+"记录"+"</h4>").appendTo("#page_info");

        }

        //定义一个解析并显示导航栏的的函数方法，需要调用才会生效
        function build_page_nav(data) {
            //清空之前的数据
            $("#page_nav").empty();
            //创建获取后台数据的变量
            var dataMap = data.map.pageInfo;
            var navigates = data.map.pageInfo.navigatepageNums;
            //创建需要动态创建的标签变量
            var ul = $("<ul></ul>").addClass("pagination");
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //如果不存在上一页，则首页，上一页点击无效果
            if (dataMap.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }
            //分页参数合理化，解决方案一：将绑定单机事件放在 else {}里面；
            // else {
            //     //给首页绑定单击事件，点击跳转相应页面
            //     firstPageLi.click(function () {
            //         to_page(1);
            //     });
            //     //给上一页绑定单击事件，点击跳转相应页面
            //     prePageLi.click(function () {
            //         to_page(dataMap.prePage);
            //     });
            // }

                //分页合理化方案二：必须将分页插件的参数reasonable，设置为true，在mybatis配置文件中的插件中；
                //  给首页绑定单击事件，点击跳转相应页面
                firstPageLi.click(function () {
                    to_page(1);
                });
                //给上一页绑定单击事件，点击跳转相应页面
                prePageLi.click(function () {
                    to_page(dataMap.prePage);
                });

                    //创建动态需要创建的标签
                    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
                    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
                    //如果不存在下一页，则末页，下一页点击无效果
                    if (dataMap.hasNextPage == false) {
                        nextPageLi.addClass("disabled");
                        lastPageLi.addClass("disabled");
                    }
                    //给下一页绑定单击事件，点击跳转相应页面
                    nextPageLi.click(function () {
                        to_page(dataMap.nextPage);
                    });
                    //给末页绑定单击事件，点击跳转相应页面
                    lastPageLi.click(function () {
                        to_page(dataMap.pages);
                    });

                    //将首页，上一页按顺序，添加到ul标签变量中去
                    ul.append(firstPageLi).append(prePageLi);

            //遍历创建展示导航页的标签变量
            $.each(navigates,function (index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //如果当前页面数，与导航页数相等，则导航页显示激活状态（一种样式）
                if (item == data.map.pageInfo.pageNum){
                    numLi.addClass("active");
                }
                //给创建的导航页绑定单击事件，点击跳转相应页面
                numLi.click(function () {
                    to_page(item);
                });
                //将导航页添加到ul标签变量中
                ul.append(numLi);
            });
            //再将下一页，末页按照顺序添加到ul标签中去
            ul.append(nextPageLi).append(lastPageLi);
            //创建一个导航标签变量，并将ul标签添加进去
            var navEle = $("<nav></nav>").append(ul);
            //再将导航标签变量，应用到前端页面中具体的div中去
            navEle.appendTo("#page_nav");
            // $("#page_nav").append(navEle);
        }

        //清空表单样式及内容:优化
        function reset_form(ele) {
            //重置表单
            $(ele)[0].reset();
            //清空样式
            $(ele).find("*").removeClass("has-success has-error");
            //将提示框文字清空
            $(ele).find(".help-block").text("");
        }

        //给"添加员工"按钮绑定单击事件，弹出模态框,会自动执行
        $("#emp_add_modal_btn").click(function () {
            //清除模态框表单中之前的数据,重置表单数据一下（两种方式），
            //方案一： 注意一定要带[0]
            // $("#empAddModal form")[0].reset();
            //方案二：注意一定要带[0]
            // $(".form-horizontal")[0].reset();

            //优化
            reset_form(".form-horizontal");
            //先发送ajax请求，获取数据库中所有部门的名称
            getDepts("#empAddModal select");
            //利用js调用模态框
            $("#empAddModal").modal({
                backdrop:"static"
            });

        });

        //查出所有部门信息并显示在下拉列表中
        function getDepts(ele) {
            //将之前的数据清空
            $(ele).empty();
            $.ajax({
                url:"${path}/depts",
                type:"get",
                success:function (data) {
                    //获取数据在控制台打印出来
                    console.log(data);
                    $.each(data.map.depts,function (index,item) {
                        var optionEle = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                        optionEle.appendTo(ele);
                    })
                }
            });
        }

        //校验表单数据方法（前端验证）：需要调用才会生效
        function validata_add_form() {
            //1.拿到需要校验的数据，使用正则表达式
            var empName = $("#empName_add_input").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            //检测用户名是否匹配正则表达式:
            if (!regName.test(empName)){
                //给出提示
                // alert("用户名可以是2-5位中文或者6-16位英文和数字组合");
                // $("#empName_add_input").parent().addClass("has-error");
                // $("#empName_add_input").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字组合");

                //调用提示框样式方法
                show_validata_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字组合");
                //如果不符合规则，则不需要继续往下执行了
                return false;
            }else{
                // $("#empName_add_input").parent().addClass("has-success");
                // $("#empName_add_input").next("span").text();

                //调用提示框样式方法
                show_validata_msg("#empName_add_input","success","");
            }
            //如果没有校验失败，继续校验其他数据
            //2.校验邮箱
            var email = $("#email_add_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if (!regEmail.test(email)){
                // alert("邮箱格式不正确");
                show_validata_msg("#email_add_input","error","邮箱格式不正确");
                return false;
            }else {
                show_validata_msg("#email_add_input","success","");
            }
            //数据校验ok，才继续执行下一步，保存数据才可以被执行
            return true;
        }

        //显示校验结果的提示信息方法：需要调用才能生效
        function show_validata_msg(ele,status,msg) {
            //先清除之前的样式
            $(ele).parent().removeClass("has-success has-error");
            //再根据条件添加样式
            if ("success" == status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if ("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        //验证用户名是否在数据库中已经存在:自动生效
        $("#empName_add_input").change(function () {
            //发送ajax请求，调用后台服务程序验证
            var empName = $("#empName_add_input").val(); //获取当前输入框的值
            $.ajax({
                url:"${path}/checkuser",
                type:"post",
                data:"empName="+empName,
                success:function (result) {
                    if (result.core == 100){
                        show_validata_msg("#empName_add_input","success","用户名可用");
                        //设置一个属性值，方便后面判断使用
                        $("#empName_add_input").attr("ajax-val","success");
                    }else {
                        // show_validata_msg("#empName_add_input","error","用户名重复");
                        show_validata_msg("#empName_add_input","error",result.map.va_regx);
                        $("#empName_add_input").attr("ajax-val","error");
                    }
                }
            });
        });

        //给"保存员工"按钮，绑定点击事件
        $("#emp_save_btn").click(function () {
            //要想获取form表单中的数据，需要将这个表单序列化，才能获得
            // alert($("#empAddModal form").serialize());
            //1.先校验数据(前端验证)，再发送请求
            if (!validata_add_form()){
                return false;
            }
            //2.判断之前发送的ajax请求的用户名是否存在（后端验证，后端验证比前端验证要严格很多），成功了才继续向下执行
            if ($("#empName_add_input").attr("ajax-val") == "error"){
                return false;
            }
            //3.将模态框中的数据，发送ajax请求给后台服务器，并保存到数据库中；
            $.ajax({
                url:"${path}/emps",
                type:"post",
                /**
                 *  jQuery会自动将所有数据，封装为一个数据库对应表的对象，发送给后台。
                 *  因此上文的form表中的name值要与数据库对应实例表的属性值保持一致
                 */
                data:$("#empAddModal form").serialize(),
                success:function (data) {
                    if (data.core == 100){
                        // alert(data.msg);
                        //1.员工保存成功，关闭模态框
                        $("#empAddModal").modal("hide");
                        //2.页面跳转到最后一页，查看数据
                        //方案一：写一个很大页面数字，会自动跳转到仅有的最后一页
                        // to_page(9999);
                        //方案二：用总记录数，作为跳转的页数
                        to_page(totalRecord);
                    }else{
                        //显示JSR303后端验证失败的信息
                        // console.log(data);
                        // alert(data.map.errorFields.email);
                        // alert(data.map.errorFields.empName);

                        $.each(data.map.errorFields,function (index,item) {
                            if (undefined != data.map.errorFields.email){
                                //显示邮箱错误提示
                                show_validata_msg("#email_add_input","error",item);
                            }else if(undefined != data.map.errorFields.empName){
                                //显示用户名错误提示
                                show_validata_msg("#empName_add_input","error",item);
                            }
                        })
                    }

                }
            });
        });

        //给编辑按钮绑定单击事件
        /**
         * 注意：（1）按钮是页面加载完成后，才创建的，因此使用 click()方法绑定不上
         *      （2）jQuery低版本(<1.9)，给动态创建的按钮绑定单击事件，使用 live()方法
         *      （3）jQuery新版本（>=1.9），给动态创建的按钮绑定单击事件，使用 on()方法
         *      
         *      document：整个页面对象
         */
        $(document).on("click",".edit_btn",function () {
            // alert("edit");
            //1.查出部门信息，显示部门信息
            getDepts("#empUpdateModal select");
            //2.查出员工信息，显示员工信息
            var id=$(this).attr("edit_id");
            //3.将员工id传递给模态框的保存修改按钮
            $("#emp_update_btn").attr("edit_id",id);
            //4.回显员工信息
            getEmp(id);
            //5.打开模态框
            $("#empUpdateModal").modal({
                // backdrop: "status"
                backdrop: true
            });
        });

        //查询回显修改员工信息:
        function getEmp(id) {
            //清空之前数据
            // $(this).empty();
            //发起Ajax请求查询当前员工名
            $.ajax({
                url:"${path}/emps/"+id,
                type:"get",
                success:function (result) {
                    //获取后台的数据
                    var empData = result.map.emp;
                    //回显员工姓名
                    $("#empName_update_static").text(empData.empName);
                    //回显员工邮箱
                    $("#email_update_input").val(empData.email);
                    //回显员工性别,单选框的赋值要加 []
                    $("#empUpdateModal input[name = gender]").val([empData.gender]);
                    // 回显员工部门,下拉框的赋值要加 []
                    $("#empUpdateModal select").val([empData.dId]);
                }
            });
        }
        
        //给"保存修改"按钮绑定单击事件，且将修改的员工数据保存到数据库中
        $("#emp_update_btn").click(function () {
            //验证邮箱是否合法
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if (!regEmail.test(email)){
                // alert("邮箱格式不正确");
                show_validata_msg("#email_update_input","error","邮箱格式不正确");
                return false;
            }else {
                show_validata_msg("#email_update_input","success","");
            }
            //发送ajax请求，进行用户信息保存
            var id = $(this).attr("edit_id");
            /**
             * 方案一：发送post请求，但是要通过hiddenHttpMethodFilter过滤器，转换为put类型请求，
             *        而且发送的数据结尾需要带上"&_method=PUT"
             */
            <%--$.ajax({--%>
            <%--    url:"${path}/emps/"+id,--%>
            <%--    type:"post",--%>
            <%--    //注意put请求发送的格式--%>
            <%--    data:$("#empUpdateModal form").serialize()+"&_method=PUT",--%>
            <%--    success:function (result) {--%>
            <%--        // alert(result.msg);--%>
            <%--        //1.关闭模态框--%>
            <%--        $("#empUpdateModal").modal("hide");--%>
            <%--        //2.回到当前页面--%>
            <%--        to_page(currentPage);--%>
            <%--    }--%>
            <%--});--%>
            /**
             * 方案二：直接发送put请求
             */
            $.ajax({
                url:"${path}/emps/"+id,
                type:"put",
                //注意put请求发送的格式
                data:$("#empUpdateModal form").serialize(),
                success:function (result) {
                    // alert(result.msg);
                    //1.关闭模态框
                    $("#empUpdateModal").modal("hide");
                    //2.给出保存成功提示
                    // alert(result.msg);
                    //3.回到当前页面
                    to_page(currentPage);
                }
            });
        });

        //给删除按钮绑定单击事件,注意是动态创建的删除按钮，要使用on()方法绑定单击事件
        $(document).on("click",".delete_btn",function () {
            //弹出是否删除确认框
            var empId = $(this).attr("del_id");
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            //confirm:会自动弹出确认框，让用户确认。有点类似提示框alert
            if (confirm("确认删除【"+empName+"】吗?")){
                //如果确认删除，发送ajax请求，删除员工
                $.ajax({
                    url:"${path}/emps/"+empId,
                    type:"delete",
                    success:function (result) {
                        //提示处理成功
                        alert(result.msg);
                        //回到当前页面
                        to_page(currentPage);
                    }
                })
            }
        });
        
        //完成全选，全不选功能
        $("#checkbox_all").click(function () {
            //attr():获取标签自定义属性值，也可以设置自定义属性值
            //prop():获取标签原生属性值，也可以设置原生属性值
            //设置全选，全不选
            $(".check_item").prop("checked",$(this).prop("checked"));

        });

        //当前页面的所有单选项，都选中时，全选也自动选中
        $(document).on("click",".check_item",function () {
            //若已选项的长度与当前页面的所有选项相同，则全选为true
            var flag = $(".check_item:checked").length == $(".check_item").length;
            $("#checkbox_all").prop("checked",flag);
        });

        //给"批量删除"按钮，绑定点击事件
        $("#emp_delete_all_btn").click(function () {
            var empNames = "";
            var ids = "";
            //将被选中的员工名称，全部展示出来
            $.each($(".check_item:checked"),function () {
                empNames += " "+$(this).parents("tr").find("td:eq(2)").text()+" ,";
                ids += $(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //去除多余的逗号 ,
            empNames = empNames.substring(0,empNames.length-1);
            //去除多余的横杠 -
            ids = ids.substring(0,ids.length-1);
            //发送ajax请求，进行批量删除
            if (confirm("你确定全部删除【"+empNames+"】吗?")){
                $.ajax({
                    url:"${path}/emps/"+ids,
                    type:"delete",
                    success:function (result) {
                        //返回提示信息
                        alert(result.map.del_all);
                        //回到当前页面
                        to_page(currentPage);
                    }
                });
            }

        })
    </script>
</body>
</html>
